.blog-header {
  // 背景色-外部-light
  --color-bg-outside-light: #b4dafb;
  // 背景色-内部-light
  --color-bg-content-light: #ffffff;
  // 背景色-外部-dark
  --color-bg-outside-dark: #0d0f12;
  // 背景色-内部-dark
  --color-bg-content-dark: #0d0f12;

  position: relative;
  height: 26rem;
  background: linear-gradient(
    to bottom,
    var(--color-bg-outside-light),
    var(--color-bg-content-light)
  );

  .content-wrapper {
    position: absolute;
    width: 100%;
    top: 5rem;
    padding: 0 var(--margin-x-page);
    display: flex;
    justify-content: center;
    z-index: 1;

    .content-box {
      width: 100%;
      display: flex;
      justify-content: center;

      .left {
        width: 65%;
        max-width: 46rem;
        min-height: 12.5rem;
        margin: 0 var(--margin-x-text-normal);
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;

        h1 {
          font-size: 2.75rem;
          color: var(--color-home-title);
          text-shadow: 1px 1px var(--color-home-title-shadow);
        }

        h3 {
          margin-top: 2rem;
          line-height: 2.5rem;
          color: var(--color-text-secondary);
        }
      }

      .right {
        position: relative;
        width: 35%;
        max-width: 24rem;

        img {
          position: absolute;
          top: 5rem;
        }
      }
    }
  }
}

.blog-header::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    var(--color-bg-outside-dark),
    var(--color-bg-content-dark)
  );
  opacity: 0;
  transition: all var(--time-transition-theme);
}

@media (max-width: 54rem) {
  .blog-header .content-wrapper .content-box {
    .left {
      width: 100%;
    }

    .right {
      display: none;
    }
  }
}

[data-theme='dark'] {
  .blog-header {
    .content-wrapper .content-box {
      .right img {
        filter: brightness(50%) contrast(1.5);
      }
    }
  }

  .blog-header::after {
    opacity: 1;
  }
}
